<template>
  <div class="allocation-task">
    <el-dialog :visible.sync="dialogShow" title="分配任务" :close-on-click-modal="false">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="120px">
        <!-- <el-row class="form_item_height">
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="任务来源:" prop="source">{{ formaterData(dataFormList, formData.source) }}</el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="产品配置类型:" prop="proConfigType">{{ formaterData(proConfigTypeList, formData.proConfigType) }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="关联图纸:" prop="picTaskCode">{{ formData.picTaskCode }}</el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="图纸名称:" prop="picTaskName">{{ formData.picTaskName }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="所属门店:" prop="shopName">{{ formData.shopName }}</el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="所属办事处:" prop="officeName">{{ formData.officeName }}</el-form-item>
          </el-col>
        </el-row> -->
        <el-form-item prop="person" label="分配产品配置人员">
          <input-with-dialog
            v-model="staff"
            :props="{label:'userName',value:'account'}"
            :multiple="false"
            :focus-query="true"
            :config="configuratorConfig"
            @change="configuratorChange"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="mini" @click="clickHandle">取消</el-button>
        <el-button type="primary" size="mini" @click="confirmHandle">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { submitAllocationTask } from '@/api/proConfig'
import { getUserOrg, getUserInfo } from '@/utils/auth'
import { getDictByPatchType } from '@/api/dataDict'
export default {
  name: 'AllocationTask',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // visible: false,
      formData: {},
      dataFormList: [],
      proConfigTypeList: [],
      staff: [],
      formRules: { person: '' },
      configuratorConfig: {
        title: '产品配置人员',
        // method: 'get',
        // interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/staffingAndOffice/page`,
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/user/listUsers`,
        setting: [
          {
            prop: 'account',
            title: '账号'
          },
          {
            prop: 'userName',
            title: '名称'
          }
        ]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  async created() {
    await this.getDictByTypeCode(['PRODUCT_CONFIG_TASK_SOURCE', 'PRO_CONFIG_TYPE']).then(res => {
      this.dataFormList = res.PRODUCT_CONFIG_TASK_SOURCE // 设计范围
      this.proConfigTypeList = res.PRO_CONFIG_TYPE // 装修形式
    })
    const { account, userName } = getUserInfo()
    const date = new Date()
    const year = date.getFullYear()
    const month = this.dateFormater(date.getMonth() + 1)
    const day = this.dateFormater(date.getDate())
    const hh = this.dateFormater(date.getHours())
    const mm = this.dateFormater(date.getMinutes())
    const ss = this.dateFormater(date.getSeconds())
    this.$set(this.formData, 'distributorCode', account)
    this.$set(this.formData, 'distributorName', userName)
    this.$set(this.formData, 'distributeTime', `${year}-${month}-${day} ${hh}:${mm}:${ss}`)
  },
  methods: {
    // 获取数据字典
    async getDictByTypeCode(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 格式化数据
    formaterData(arr, dictCode) {
      if (!arr || !arr.length) return
      const tmpArr = arr.filter(item => item.dictCode === dictCode)
      if (tmpArr.length) {
        return tmpArr[0].dictName
      }
      return dictCode
    },
    // 时间格式化
    dateFormater(data) {
      if (Number(data) < 10) {
        return '0' + data
      }
      return data
    },
    // 取消
    clickHandle() {
      // this.$confirm('此操作不可逆，是否确认并返回列表界面?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      this.dialogShow = false
      this.clearForm()
      // })
    },
    // 清空表单
    clearForm(done) {
      this.staff = []
      this.$refs.form && this.$refs.form.clearValidate()
      done && done()
    },
    // 确定
    confirmHandle() {
      if (!this.formData.proConfiguratorCode) {
        this.$message.warning('请选择分配产品配置人员')
        return
      }
      const { customerName } = getUserOrg()
      this.$set(this.formData, 'distributor', customerName)
      this.$set(this.formData, 'schedule', 'B')

      const submitList = this.detailData.map(v => { return { ...v, ...this.formData } })
      submitList.forEach(v => { submitAllocationTask(v).then() })
      this.$message.success('操作成功')
      this.dialogShow = false
      this.clearForm()
      this.$emit('success')
    },
    // 选择分配人员
    configuratorChange(data) {
      this.$set(this.formData, 'proConfiguratorCode', data[0].account)
      this.$set(this.formData, 'proConfiguratorName', data[0].userName)
    }
  }
}
</script>
<style lang="scss" scoped>
.allocation-task{
  display: inline-block;
  margin-right: 10px
}
</style>
